<template>
  <div id="centreRight1">
    <div class="bg-color-black">
       <div class="titles">
          <span>健康监测</span>
        </div>
      <div class="scrollH">
        <div :class="{ anim: animate }" @mouseenter="stop()" @mouseleave="up()">
        <div class="eventItem" v-for="(item,index) in eventList" :key="index" @click="focusItem(item)">
            <div class="resolve" v-if="item.process_status == 1">未处理</div>
            <div class="resolve resolve_yellow" v-if="item.process_status == 2">处理中</div>
            <div class="d-flex flex-1" style="align-items:center;">
              <div class="flex-1">
                 <div class="nameinfo">
                  <span class="local mr-2" v-if="item.data.device">场所：{{item.data.device.address}}</span>
                  <span class="local mr-2" v-else>场所：</span>
                  <span class="time">发生时间：{{item.alert_time}}</span>
                </div>
                <div class="warn">{{item.data.merticName}}预警  当前:{{parseInt(item.trigger_value)}}  
                    <block v-if="item.data.merticValue">
                       预警值:{{item.data.merticValue.min_value}}-{{item.data.merticValue.max_value}}
                    </block>
                    <block v-else>
                       预警值:
                    </block>
                </div>
              </div>
              <div class="chuli" @click.stop="processEvent(item)">处理</div>
            </div>
        </div>
        </div>
      </div>
    </div>
    <alert-dialog :dialogVisible="dialogVisible" :currentAlert="currentAlert" @handleClose="handleClose" v-if="dialogVisible" @showProfile="showProfile" @updateAlert="initData"></alert-dialog>
    <!-- 个人信息弹窗 -->
    <profile-dialog :profileDialogVisible="profileDialogVisible" @handleClose2="handleClose2" :user_id="user_id" v-if="profileDialogVisible"></profile-dialog>
  </div>
</template>

<script>
import profileDialog from '../components/profileDialog.vue';
import alertDialog from '../components/alertDialog.vue';
import { mapState } from 'vuex'; // 引入mapState
// 处理情况 1未处理 2处理中 3已处理
export default {
  data() {
    return {
       eventList: [],
       scrollTimer: null,
       fetchTimer: null,
        animate: false,
        dialogVisible: false,
        currentAlert: {},
        profileDialogVisible: false,
        user_id: '',
        fetchInterval: 10000 // 10秒请求一次数据
        
    };
  },
  components: {
    alertDialog,
    profileDialog
  },
  computed: {
    ...mapState({
      cityId: state => state.system.cityId, // 从Vuex Store中获取cityId
    }),
  },
  mounted() {
    this.initFetchTimer();
    this.$watch('cityId', (newVal, oldVal) => { // 监听cityId的变化
      if (newVal !== oldVal) {
        this.getHealthData(); // 当cityId变化时重新请求数据
      }
    });
  },
  beforeDestroy() {
    this.stopInterval(); // 在组件销毁前停止定时器
  },
  methods: {
    initData() {
      this.initFetchTimer();
    },
    focusItem(item) {
      // 触发事件，传递标记点ID
      this.$emit('marker-selected', {
        id: item.id,
        type: 1,
      });
    },
    stopInterval() {
      clearInterval(this.scrollTimer); // 清除滚动定时器
      clearInterval(this.fetchTimer); // 清除数据请求定时器
    },
    showProfile(e) {
      this.user_id = e.user_id;
      // this.dialogVisible = false;
      this.profileDialogVisible = true;
    },
    processEvent(item) {
      // console.log('item', item);
      this.currentAlert = {
        type: 'health',
        id: item.id,
      };
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClose2() {
      this.profileDialogVisible = false;
    },
    getHealthData() {
      this.$api.healthData({
        region_id: this.cityId, 
      }).then(res => {
          if(res.code == 0) {
            // console.log('89898',res.data)
             this.eventList = res.data.list;
             this.scrollUp(); // 开启滚动效果
          }
      })
    },
    // 滚动
    initFetchTimer() {
      this.getHealthData(); // 立即请求一次数据
      this.fetchTimer = setInterval(() => {
        this.getHealthData();
      }, this.fetchInterval);
    },
    scrollUp() {
      this.scrollTimer = setInterval(() => {
        this.animate = true; // 向上滚动的时候需要添加动画
        setTimeout(() => {
          this.eventList.push(this.eventList[0]); // 将数组的第一个元素添加到数组最后一个
          this.eventList.shift(); // 删除数组的第一个元素
          this.animate = false;
        }, 500);
      }, 4000);
    },
    //鼠标移上去停止
    stop() {
      clearInterval(this.scrollTimer);
    },
    //鼠标离开继续
    up() {
      this.scrollUp();
    },

  },
  beforeDestroy() {
    this.stop();
  },

};
</script>

<style lang="scss">
@import 'centerRight.scss';
#centreRight1 {
  width: 6.4625rem;
  height: 3.875rem;
  box-sizing: border-box;
  margin-right: 0.125rem;
  // border: 1px solid red;
  
  
}
</style>